import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Form, Card, Button, Input, message } from 'antd'
const FormItem = Form.Item;
import LanguageInput from 'components/template/language-input/language-input'
import workflowService from 'containers/setting/workflow/workflow.service'
import workflowUtil from 'containers/setting/new-workflow/utils'

class NodePrint extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      nodeNameObj: {
        i18n: null,
        remark: null
      },
    }
  }

  //保存基础信息
  handleSaveBasicInfo = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { basicInfo } = this.props;
        let params = values;
        params.approvalActions = basicInfo.approvalActions;
        params.code = basicInfo.code;
        params.name = basicInfo.name;
        params.notifyInfo = basicInfo.notifyInfo;
        params.ruleApprovalNodeOID = basicInfo.ruleApprovalNodeOID;
        params.type = basicInfo.type;
        if (this.state.nodeNameObj.i18n) {
          params.i18n = {};
          params.i18n['remark'] = this.state.nodeNameObj.i18n;
        }else{
          params.i18n = basicInfo.i18n;
        }
        this.setState({ loading: true });
        workflowService.modifyApprovalNodes(params).then(() => {
          this.setState({ loading: false });
          this.props.basicInfoSaveHandle();
          message.success(messages('common.save.success', {name: ''}))
        }).catch(() => {
          this.setState({ loading: false })
        })
      }
    })
  };

  handleRemarkChange = (value,i18n) => {
    let { nodeNameObj } = this.state;
    nodeNameObj.remark = value;
    nodeNameObj.i18n = i18n;
    this.setState({ nodeNameObj });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { basicInfo } = this.props;
    const { loading, nodeNameObj } = this.state;
    const formItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 21},
    };
    return (
      <div className='node-print'>
        <Card className="basic-info-container">
          <h3 className="title">{messages('setting.key1371'/*基础信息*/)}</h3>
          <Form onSubmit={this.handleSaveBasicInfo}>
            <FormItem {...formItemLayout} label={messages('setting.key1372'/*节点名称*/)} colon={false}>
              {getFieldDecorator('remark', {
                initialValue: basicInfo.remark
              })(
                <LanguageInput
                  name={nodeNameObj.remark || basicInfo.remark }
                  width={300}
                  inpRule={workflowUtil.getInpRule(100, this.props.languageList)}
                  i18nName={nodeNameObj.i18n || (basicInfo.i18n && nodeNameObj.i18n)}
                  isEdit
                  nameChange={this.handleRemarkChange}
                />
              )}
            </FormItem>
            <Button type="primary" htmlType="submit" loading={loading}>{messages('common.save')}</Button>
          </Form>
        </Card>
      </div>
    )
  }
}

NodePrint.propTypes = {
  basicInfo: React.PropTypes.object,
  basicInfoSaveHandle: React.PropTypes.func, //基本信息保存成功的回调
};

NodePrint.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    languageList: state.login.languageList,
  }
}

const wrappedNodePrint = Form.create()(NodePrint);

export default connect(mapStateToProps)(wrappedNodePrint)
